<template>
  <div class="container">
    <FmTable ref="fmTable" url="/process/admin" tableName="user" :columns="columns">
      <template #status="scope">
                  <el-switch
                      v-model="scope.row.status"
                      active-text="活动"
                      inactive-text="禁止"
                      :active-value="1"
                      :inactive-value="0"
                      @change="updateStatus(scope.row)"
                  ></el-switch>
      </template>
      <template #opt="scope">
                  <el-button
                      type="primary"
                      link
                      icon="el-icon-key"
                      @click="updatepass(scope)"
                  >修改密码
                  </el-button>
                  <el-button
                      type="primary"
                      link
                      icon="el-icon-edit"
                      @click="fmTable.handleEdit(scope.$index, scope.row)"
                  >编辑
                  </el-button>
      </template>
    </FmTable>

    <!-- 修改密码弹出框 -->
    <el-dialog title="修改密码"  v-model="savepassword" destroy-on-close :before-close="function (){savepassword=false}" width="50%">
      <el-form ref="savePasswordform" :model="passworddataform"  label-width="70px">
        <el-form-item label="密码" prop="password">
          <el-input v-model="passworddataform['password']"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="savepassword = false">取 消</el-button>
        <el-button type="primary" @click="saveResetpassword(savePasswordform)">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import FmTable from '@/components/common/Table/FmTable.vue'
import {fetchData, deteleData, ExportData, saveorUpadateDate, deteleAllData} from '@/api/index';
import {ref, inject, reactive, onMounted, computed, watch, Ref} from 'vue';
import {ElMessage, ElMessageBox, FormInstance} from 'element-plus'
const MD5 = inject("$MD5")

const columns=[
  {
    "type": "column",//普通行，字典行，自定义行
    "label": "序号",//标签名称
    "index": "id",//数据库索引
    "rules": [
      {required: true, message: "请输入id", trigger: "blur",},
    ],//值规则
    "search": true,//是否是搜索表单
    "visible": true,//默认可见,
    "dataType": "text",//值值类型默认字符类型
    "addable": false,
    "editable": true
  },
  {
    "type": "column",//普通行，字典行，自定义行
    "label": "登陆名",//标签名称
    "index": "loginName",//数据库索引
    "rules": [
        {required: true, message: "请输入登陆名", trigger: "blur",},
    ],//值规则
    "search": true,//是否是搜索表单
    "visible": true,//默认可见,
    "dataType": "text",//值值类型默认字符类型
    "addable": true,
    "editable": true
  },
  {
    "type": "column",//普通行，字典行，自定义行
    "label": "昵称",//标签名称
    "index": "name",//数据库索引
    "rules": [
      {max: 50, message: '昵称长度最大为  50个字符', trigger: 'blur'},
    ],//值规则
    "search": true,//是否是搜索表单
    "visible": true,//默认可见,
    "dataType": "text",//值值类型默认字符类型
    "addable": true,
    "editable": true
  },
  {
    "type": "column",//普通行，字典行，自定义行
    "label": "密码",//标签名称
    "index": "password",//数据库索引
    "rules": [
      {max: 50, message: '昵称长度最大为  50个字符', trigger: 'blur'},
    ],//值规则
    "search": true,//是否是搜索表单
    "visible": true,//默认可见,
    "dataType": "text",//值值类型默认字符类型
    "addable": true,
    "editable": false
  },
  {
    "type": "self",//普通行，字典行，自定义行
    "label": "状态",//标签名称
    "index": "status",//数据库索引
    "rules": [
      {max: 50, message: '昵称长度最大为  50个字符', trigger: 'blur'},
    ],//值规则
    "visible": true,//默认可见,
    "dataType": "text",//值值类型默认字符类型
    "addable": false,
    "editable": false
  },
  {
    "type": "opt",//普通行，字典行，自定义行
    "label": "操作",//标签名称
    "index": "opt",//数据库索引
    "rules": [
      {max: 50, message: '昵称长度最大为  50个字符', trigger: 'blur'},
    ],//值规则
    "search": true,//是否是搜索表单
    "visible": true,//默认可见,
    "dataType": "text",//值值类型默认字符类型
    "addable": false,
    "editable": false
  }
]
let fmTable=ref()
let savepassword = ref(false)
let passworddataform = reactive({})
let savePasswordform=ref<FormInstance>()
let saveResetpassword = (fromName: any) => {
  fromName.validate((valid) => {
    if (valid) {
      passworddataform.password = MD5.hex_md5(passworddataform.password + MD5.KEY);
      saveorUpadateDate('/process/admin/user/savepassword', passworddataform).then(res => {
        ElMessage.success("保存成功")
        fmTable.value.readyGetData()
        savepassword.value = false
        // passworddataform = {}
      });
    } else {
      return false;
    }
  })
}
let updatepass=(scope:any)=>{
  savepassword.value=true;
  passworddataform.id=scope.row.id
}
let updateStatus = (data: any) => {
  if(Object.keys(data).length>1) {
    saveorUpadateDate('/process/admin/user/save', data).then(res => {
      ElMessage.success("更新成功")
      fmTable.value.readyGetData()
    })
  }
}

</script>
<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

</style>